<template>
  <div>
    <el-row>
      <el-col :span="16">
        <!-- 头部form表单 -->
        <el-form size="mini" label-width="110px" label-position="left">
          <el-col :span="8" v-for="(item, index) in propsList" :key="index">
            <el-form-item
              :label="item[0]"
              :key="index"
              ref="form"
              v-model="form"
            >
              <el-input v-model="form[item[1]]" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <!-- 可添加行的表格 -->
          <can-add-table
            v-if="isreload"
            :header="header"
            @fristButton="getTableList"
            :rows="rows"
            @thirdButton="openApplyForm"
            @secondButton="printApplyForm"
            :projectList="projectList"
            @reload="reload"
            @receiveAmount="receiveAmount"
          ></can-add-table>
        </el-col>
      </el-col>
      <el-col :span="8">
        <!-- echarts图表 -->
        <div style="width:100%;height:300px;" id="chart" v-show="isshow"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CanAddTable from "./can-add-table";
import {
  apiDrawMoneyInfo,
  apiSaveDrawFunds,
  apimodifyDrawFunds
} from "@/request/api.js";
export default {
  name: "echarts",
  data() {
    return {
      propsList: [
        ["合作供应商", "manage_contract_firstParty"],
        ["项目名称", "manage_contract_name"],
        ["合同编号", "manage_contract_num"],
        ["建设单位", "manage_contract_company"],
        ["合同金额", "manage_contract_amount"]
      ],
      form: {},
      Companyid: "",
      Received: Number,
      noReceived: Number,
      isshow: true,
      companys: ["建设公司", "科技公司", "技术加盟"],
      rows: [],
      isreload: true,
      header: [
        [
          "已收款金额",
          "",
          "",
          "",
          "",
          [
            ["时间", "manage_drawMoney_recieveDate", 110, "date"],
            ["金额", "manage_drawMoney_recieve", 90]
          ]
        ],
        ["扣除管理费", "manage_drawMoney_manageFee", "", 100],
        ["扣除税费2%", "manage_drawMoney_Taxes", "", 100],
        ["可提金额", "manage_drawMoney_getOut", "", 80, true],
        [
          "付款时间及金额",
          "",
          "",
          "",
          "",
          [
            ["时间", "manage_drawMoney_payTime", 110, "date"],
            ["金额", "manage_drawMoney_thisDraw", 90]
          ]
        ],
        [
          "发票情况",
          "",
          "",
          "",
          "",
          [
            ["发票金额", "manage_drawMoney_invoice", 100],
            ["开票单位", "manage_drawMoney_invoiceCompany", 100],
            ["开票类型", "manage_ticket_category", 100]
          ]
        ]
      ]
    };
  },
  components: {
    CanAddTable
  },
  props: {
    projectList: Object
  },
  mounted() {
    // 图表必须在mounted后的钩子使用，不然会渲染出问题
    this.showecharts();
    this.getFundsList();
  },
  methods: {
    printApplyForm(id) {
      this.$emit("printApplyForm", [id, this.form]);
    },
    openApplyForm(id) {
      this.$emit("openApplyForm", [id, this.form]);
    },
    //重載
    reload() {
      this.isreload = false;
      this.$nextTick(() => {
        this.isreload = true;
      });
      this.getFundsList();
    },
    getFundsList() {
      apiDrawMoneyInfo({
        manage_contract_id: this.projectList.manage_contract_id
      }).then(res => {
        console.log(res);
        //表头的管理费拼接，当header[1][0]中不含有%时进行拼接（防止刷新界面重复拼接）
        let managementFee = res.head.manage_contract_managementFee;
        if (!this.header[1][0].includes("%")) {
          if (managementFee) {
            this.header[1][0] += managementFee + "%";
          } else {
            this.header[1][0] += "0%";
          }
        }
        //遍历下面的开票记录，计算出管理费和税费
        this.rows = res.entry.map(item => {
          item.manage_ticket_category =
            item.manage_ticket_category == 1 ? "材料票" : "劳务票";
          item.manage_drawMoney_Taxes = item.manage_drawMoney_recieve * 0.02;
          //
          item.manage_drawMoney_manageFee =
            item.manage_drawMoney_recieve *
            (managementFee ? managementFee : 0) *
            0.01;
          return item;
        });
        this.form = res.head;
        this.form.manage_contract_company =
          this.form.manage_contract_company == 1
            ? "建设公司"
            : this.form.manage_contract_company == 2
            ? "科技公司"
            : "技术加盟";
      });
    },
    //获取收款金额
    receiveAmount(val) {
      // 收款金额，未收款金额用于echarts图表的显示
      this.Received = val;
      this.noReceived = this.form.manage_contract_amount - val;
      this.isshow = false;
      this.$nextTick(() => {
        this.isshow = true;
        this.showecharts();
      });
    },
    getCompanyName(val) {
      this.form.manage_contract_payCompany = val;
    },
    //从子组件获取表格的数据
    getTableList() {
      this.$confirm(`确定开票吗？`)
        .then(() => {
          this.$emit("printApplyForm", this.form);
        })
        .catch(() => {});
    },
    showecharts() {
      let mychart = this.$echarts.init(document.getElementById("chart"));
      mychart.setOption({
        title: {
          text: "合同总金额：" + this.form.manage_contract_amount,
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["已收款", "未收款"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: this.Received, name: "已收款" },
              { value: this.noReceived, name: "未收款" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
